<template>
  <div class="withdraw">
    <nav-bar></nav-bar>
    <div class="page-main clearfix" v-loading.body="loading">
      <div class="page-left">
        <div class="notice">
          <div class="notice-card">
            <div class="icon"></div>
          </div>
          <div class="notice-text">
            <div style="font-size:20px;margin-bottom:20px;">提现说明</div>
            <div>
            只有钻石语点可提现
            提现时，平台会扣除20%运营费
            提现到账日为每月10号、20号、30号
            普通语点需先在语点交易换成钻石语点
            最终解释权归晓语典所有
            </div>
          </div>
        </div>
      </div>
      <div class="page-right">
        <div class="title">提现信息：</div>
        <div class="trigger-list">
          <div class="tl-head clearfix">
            <div class="tlh-left">提现账户</div>
            <div class="tlh-right"><a @click="handleAdd">+新增收款人信息</a></div>
          </div>
          <ul class="tl-body-more" :style="spread ? `height: ${61 * accounts.length}px` : 'height: 61px'">
            <li class="tl-item" v-for="item,i in accounts">
              {{item.username}}      {{item.card_no}}    {{item.bank}}    {{item.phone_no}}
              <el-checkbox :value="item.checked" @change="changeAccCheck(item)"></el-checkbox>
            </li>
          </ul>
          <div class="tl-bottom">
            <a href="javascript:;" @click="selectOther">
              <span v-if="!spread">选择其他账户<i class="el-input__icon el-icon-caret-bottom"></i></span>
              <span v-if="spread">收起<i class="el-input__icon el-icon-caret-top"></i></span>
            </a>
          </div>
        </div>
        <div class="can-withdraw">
          <div class="cw-card">
            <div class="cwc-money">{{valid}}</div>
            <div class="cwc-text">可提现点数</div>
          </div>
          <div class="cw-text">
            提现金额将会在每月10号、20号、30号到账，节假日顺延
          </div>
        </div>
        <div class="input-group">
          <label for="">输入提现点数：</label>
          <el-input style="width: 474px;" placeholder="建议输入整数提现" v-model.number="exchange" type="number" ></el-input>
        </div>
        <div class="confirm-group clearfix">
          <span class="money" >到账金额：{{isNaN(exchange) ? 0 : (exchange * 0.8).toFixed(2)}}元</span>
          <span class="tips">继续代表您同意《晓语典vip服务协议》</span>
          <button class="common-btn" @click="handleCash">立即提现</button>
        </div>
      </div>
    </div>
    <el-dialog title="新增账户" :visible.sync="dialogFormVisible">
      <el-form :model="form" style="padding: 37px 80px 0">
        <el-form-item label="收款人姓名：" :label-width="formLabelWidth">
          <el-input v-model="form.username" auto-complete="off" placeholder="请输入收款人姓名"></el-input>
        </el-form-item>
        <el-form-item label="银行名：" :label-width="formLabelWidth">
          <el-select
            v-model="form.bank"
            placeholder="选择银行"
            style="width:360px;"
          >
            <el-option
              v-for="item,i in bankList"
              :key="i"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行卡号：" :label-width="formLabelWidth">
          <el-input v-model="form.card_no" auto-complete="off" placeholder="请输入银行卡号"></el-input>
        </el-form-item>
        <el-form-item label="电话号码：" :label-width="formLabelWidth">
          <el-input v-model="form.phone_no" auto-complete="off" placeholder="请输入手机电话号码"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button type="primary" @click="handlePreAcc">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getWallet, getMyAccount, addAccount, getCash } from 'api/user'

const BankList = ['中国工商银行', '中国农业银行', '中国建设银行', '中国银行', '交通银行', '招商银行', '中信实业银行', '上海浦东发展银行', '民生银行', '光大银行', '广东发展银行', '兴业银行', '华夏银行', '上海银行', '北京银行', '深圳发展银行', '深圳市商业银行', '天津市商业银行', '广州市商业银行', '杭州市商业银行', '南京市商业银行', '东莞市商业银行', '宁波市商业银行', '无锡市商业银行', '恒丰银行', '武汉市商业银行', '长沙市商业银行', '大连市商业银行', '西安市商业银行', '重庆市商业银行', '济南市商业银行', '成都市商业银行', '贵阳市商业银行', '石家庄市商业银行', '昆明市商业银行', '烟台市商业银行', '哈尔滨市商业银行', '郑州市商业银行', '乌鲁木齐市商业银行', '青岛市商业银行', '温州市商业银行', '合肥市商业银行', '淄博市商业银行', '苏州市商业银行', '太原市商业银行', '绍兴市商业银行', '台州市商业银行', '浙商银行', '临沂市商业银行', '鞍山市商业银行', '潍坊市商业银行']

export default {
  name: 'withdraw',
  components: {
    NavBar
  },
  computed: {
    valid: {
      get() {
        return this.$store.state.money.valid
      }
    }
  },
  data() {
    return {
      spread: false,
      loading: false,
      exchange: 0,
      accounts: [],
      formLabelWidth: '120px',
      // valid: 0,
      dialogFormVisible: false,
      bankList: BankList,
      form: {
        username: '',
        bank: '',
        card_no: '',
        phone_no: ''
      }
    };
  },
  created() {
    // 初始化
    this.loading = true
    this.$store.dispatch('GetMoney')
    .then(res => {
      this.valid = res.wallet.valid
    })
    .catch(err => console.log(err))
    getMyAccount()
    .then(res => {
      if (res.data.length !== 0) {
        this.accounts = res.data.map((v, i) => {
          if (i === 0) {
            this.checkedAcc = v.id
            v.checked = true
          } else {
            v.checked = false
          }
          return v
        })
      } else {
        this.accounts = res.data
      }
      this.loading = false
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    fetchData() {
      this.loading = true
      this.$store.dispatch('GetMoney')
      .then(res => {
        this.valid = res.wallet.valid
      })
      .catch(err => console.log(err))
      getMyAccount()
      .then(res => {
        if (res.data.length !== 0) {
          this.accounts = res.data.map(v => {
            if (v.id === this.checkedAcc) {
              v.checked = true
            } else {
              v.checked = false
            }
            return v
          })
        } else {
          this.accounts = res.data
        }
        this.loading = false
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    selectOther() {
      this.spread = !this.spread
    },
    // 添加账户--弹框
    handleAdd() {
      this.dialogFormVisible = true
    },
    handlePreAcc() {
      addAccount(this.form)
      .then(res => {
        this.dialogFormVisible = false
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.fetchData()
      })
      .catch(err => console.log(err))
    },
    changeAccCheck(item) {
      this.accounts.forEach(v => {
        if (v.id === item.id) {
          this.checkedAcc = item.id
          v.checked = true
        } else {
          v.checked = false
        }
      })
    },
    handleCash() {
      getCash({
        account_id: this.checkedAcc,
        exchange: this.exchange,
        money: (this.exchange * 0.8).toFixed(2)
      })
      .then(res => {
        this.$message({
          message: '提现成功',
          type: 'success'
        })
        this.fetchData()
      })
      .catch(err => {
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.withdraw{
  .page-main{
    min-height: 400px;
    .page-left{
      float: left;
      width: 570px;
      margin-right: 50px;
      .notice{
        width: 100%;
        background-color: #f4f4f4;
        height: 257px;
        .notice-card{
          width: 257px;
          height: 257px;
          float: left;
          background-color: #F9A541;
          background: -webkit-gradient(linear,0 0,0 100%,from(#35D6B3),to(#43C97C));
          padding: 60px;
          text-align: center;
          .icon{
            width: 130px;
            height: 130px;
            display: inline-block;
            text-align: center;
            background-image: url('../../assets/common_images/withdraw.png');
            background-repeat: no-repeat;
            background-size: 80px;
            background-position: 25px 25px;
          }
        }
        .notice-text{
          width: 313px;
          float: left;
          padding: 60px 30px;
        }
      }
    }
    .page-right{
      float: left;
      width: 580px;
      .title{
        font-size: 20px;
        color: #ccc;
      }
      .trigger-list{
        margin-top: 20px;
        border: 1px solid #e5e6e7;
        padding: 0 20px;
        .tl-head{
          .tlh-left{
            float: left;
            line-height: 30px;
            font-weight: bold;
          }
          .tlh-right{
            float: right;
            line-height: 30px;
            a{
              color: #999;
              &:hover{
                color: #00A2EA;
              }
            }
          }
        }
        .tl-body{

        }
        .tl-item{
          padding: 20px 0;
        }
        .tl-body-more{
          overflow: hidden;
          transition: height .2s;
        }
        .tl-bottom{
          text-align: center;
          line-height: 30px;
          >a{
            position: relative;
            padding-right: 30px;
          }
        }
      }
      .can-withdraw{
        margin-top: 20px;
        >div{
          display: inline-block;
          vertical-align: middle;
        }
        .cw-card{
          border: 1px solid #e5e6e7;
          padding: 27px 36px;
          .cwc-money{
            font-size: 22px;
            color: #EF6401;
          }
          .cwc-text{
            color: #999;
          }
        }
        .cw-text{
          font-size: 12px;
          color: #F12929;
        }
      }
      .input-group{
        margin-top: 20px;
      }
      .confirm-group{
        border: 1px solid #e5e6e7;
        height: 38px;
        padding-left: 10px;
        margin-top: 20px;
        position: relative;
        .money{
          font-size: 16px;
          line-height: 38px;
          font-weight: bold;
          vertical-align: middle;
          background-color: #fff;
        }
        .tips{
          font-size: 12px;
          line-height: 38px;
          color: #999;
          margin-left: 30px;
          vertical-align: middle;
          position: absolute;
          top: 0;
          right: 200px;
          z-index: -1;
        }
        .common-btn{
          float: right;
          margin-top: -1px;
          height: 38px;
          width: 160px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>